<template>
  <el-row>
    <el-col :span="4" v-for="item in qiegeji" :key="item.id">
      <el-card :body-style="{ padding: '5px' }" style="text-align: center">
        <div></div>
        <img src="src/assets/img/qiegeji3.jpg" style="text-align: center" @click="showInfo(item.id)">
        <div>
          <img v-bind:src="item.path" style="vertical-align: middle">
          <span style="vertical-align: middle">{{ item.name }}</span>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'qiegeji',
  data () {
    return {
      timer0: null,
      state1: require('@/assets/img/lv.png'),
      state: [],
      param: [],
      // 存储各切割机状态
      eachState: [],
      max_i: '',
      max_p: '',
      currentDate: new Date(),
      qiegeji: [
        {
          id: 1,
          name: '切割机1',
          path: ''
        },
        {
          id: 2,
          name: '切割机2',
          path: ''
        },
        {
          id: 3,
          name: '切割机3',
          path: ''
        },
        {
          id: 4,
          name: '切割机4',
          path: ''
        },
        {
          id: 5,
          name: '切割机5',
          path: ''
        },
        {
          id: 6,
          name: '切割机6',
          path: ''
        },
        {
          id: 7,
          name: '切割机7',
          path: ''
        },
        {
          id: 8,
          name: '切割机8',
          path: ''
        },
        {
          id: 9,
          name: '切割机9',
          path: ''
        },
        {
          id: 10,
          name: '切割机10',
          path: ''
        },
        {
          id: 11,
          name: '切割机11',
          path: ''
        },
        {
          id: 12,
          name: '切割机12',
          path: ''
        },
        {
          id: 13,
          name: '切割机13',
          path: ''
        },
        {
          id: 14,
          name: '切割机14',
          path: ''
        },
        {
          id: 15,
          name: '切割机15',
          path: ''
        },
        {
          id: 16,
          name: '切割机16',
          path: ''
        },
        {
          id: 17,
          name: '切割机17',
          path: ''
        },
        {
          id: 18,
          name: '切割机18',
          path: ''
        }
      ]
    }
  },
  methods: {
    timer () {
      this.timer0 = setInterval(() => {
        this.qiege()
      }, 2000)
    },
    qiege () {
      this.$http({
        url: this.$http.adornUrl('/P2/fault_qiege'),
        method: 'get',
      }).then(response => {
          this.param = response.data
          this.showState(this.param)
        })
        .catch(function (error) {
          console.log(error)
        })
    },
    showState (shuju) {
      // 通过返回数值选取各设备对应状态
      for (var i = 0; i < 5; i++) {
        this.max_i = 1
        this.max_p = shuju[i][0]
        for (var j = 1; j < 6; j++) {
          if (shuju[i][j] > this.max_p) {
            this.max_i = j + 1
            this.max_p = shuju[i][j]
          }
        }
        this.eachState[i] = this.max_i
      }
      for (var k = 5; k < 15; k++) {
        this.eachState[k] = 1
      }
      for (var m = 15; m < 18; m++) {
        this.eachState[m] = 0
      }
      // 根据各焊机状态显示图标
      for (var t = 0; t < 18; t++) {
        if (this.eachState[t] === 1) {
          this.qiegeji[t].path = require('@/assets/img/lv.png')
        } else {
          this.qiegeji[t].path = require('@/assets/img/hong.png')
        }
      }
    },
    showInfo: function (num) {
      this.$router.push({
        path: '/diagnosis/fault_analysis',
        query: {
          equip: 'qiegeji',
          num: num,
          res: this.param[num - 1]
        }
      })
    }
  },
  created () {
    this.timer()
  },
  beforeDestroy () {
    if (this.timer0) {
      clearInterval(this.timer0)
    }
  }
}
</script>

<style scoped>
.image {
  width: 100%;
  display: block;
}
.el-card. {
  padding: 0px;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
